<script>
import axios from "axios";
import { time } from "echarts";

export default {
  data() {
    return {
      val: "",
      data: [],
      getmoneytime: [],
      moneyamount: [],
    };
  },
  name: "Echarts",
  methods: {
    myEcharts() {
      var myChart = this.$echarts.init(document.getElementById("main"));
      //配置图表
      var option = {
        title: {
          text: "订单收入",
        },
        tooltip: {},
        legend: {
          data: ["金额"],
          //  data: ['销量']
        },
        xAxis: {
          data: this.getmoneytime.slice(-5),
          // data: ['衬衫','羊毛衫','雪纺衫','裤子','高跟鞋','袜子']
          // type:'time'
        },
        yAxis: {
          // data: this.moneyamount.slice(-5),
          // type:"value"
        },
        series: [
          {
            // name: '销量',
            // type: 'bar',
            name: "金额",
            type: "line",
            data: this.moneyamount.slice(-5),
          },
        ],
      };
      myChart.setOption(option);
    },
    async getlist() {
      let res = await axios({
        url: "http://182.92.162.156:8083/income/income/getlist",
        method: "get",
      });
      let list = res.data.data;
      console.log(list, "订单收入数据");
      list.forEach((item) => {
        this.getmoneytime.push(item.getmoneytime);
        this.moneyamount.push(item.moneyamount);
      });
      this.myEcharts();
    },
    async moneylist() {
      let res = await axios({
        url: "http://182.92.162.156:8083/income/income/getlistmoney",
        method: "post",
      });
      this.data = res.data.data;
      // console.log(this.data, "金额数组");
    },
    totalMoney() {
      const sum = this.data.reduce((accumulator, currentValue) => {
        return +accumulator + currentValue;
      }, 0);
      console.log(sum, "计算值");
      this.val = sum;
    },
  },
  mounted() {
    this.getlist();
    this.moneylist();
    setTimeout(() => {
      this.totalMoney();
    }, 300);
  },
};
</script>

<template>
  <a-row style="background-color: #f1f1f1">
    <a-col :span="12" style="margin-top: 50px">
      <a-statistic title="订单收入" :value="val" style="margin-right: 50px" />
      <div class="Echarts">
        <div id="main" style="width:1200px; height: 400px"></div>
      </div>
    </a-col>
    <a-col :span="12">
      <a-statistic
        style="margin-top: 50px"
        title="总收入"
        :precision="2"
        :value="val"
      />
    </a-col>
  </a-row>
</template>

<style scoped>
.Echarts{
  margin-top: 80px;
}
</style>
